<h2>Why is this an issue?</h2>
<p>React JSX differs from the HTML standard in the way it handles newline characters and surrounding whitespace. HTML collapses multiple whitespace
characters (including newlines) into a single whitespace, but JSX removes such sequences completely, leaving no space between inline elements
separated by the line break. This difference in behavior can be confusing and may result in unintended layout, for example, missing whitespace between
the link content and the surrounding text.</p>
<p>To avoid such issues, you should never rely on newline characters in JSX, and explicitly specify whether you want whitespace between inline
elements separated by a line break.</p>
<pre data-diff-id="1" data-diff-type="noncompliant">
&lt;div&gt;{/* Noncompliant: ambiguous spacing */}
  Here is some
  &lt;a&gt;space&lt;/a&gt;
&lt;/div&gt;

&lt;div&gt;{/* Noncompliant: ambiguous spacing */}
  &lt;a&gt;No space&lt;/a&gt;
  between these
&lt;/div&gt;
</pre>
<p>To fix the issue, either insert an explicit JSX space as a string expression <code>{' '}</code>, or insert an empty comment expression <code>{/*
*/}</code> to indicate that the two parts will be joined together with no space between them.</p>
<pre data-diff-id="1" data-diff-type="compliant">
&lt;div&gt;
  Here is some{' '}
  &lt;a&gt;space&lt;/a&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;a&gt;No space&lt;/a&gt;{/*
  */}between these
&lt;/div&gt;
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/jsx-eslint/eslint-plugin-react">eslint-plugin-react</a> - Rule <a
  href="https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/jsx-child-element-spacing.md">jsx-child-element-spacing</a> </li>
  <li> React Documentation - <a href="https://react.dev/learn#writing-markup-with-jsx">Writing markup with JSX</a> </li>
  <li> MDN web docs - <a
  href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#spaces_in_between_inline_and_inline-block_elements">Spaces
  in between inline and inline-block elements</a> </li>
</ul>
